<!-- 参考文档:https://blog.csdn.net/q283614346/article/details/119565238 -->
<!--  
服务器日志 DLG
通过调用子控件方法,弹出窗口,并传递参数,对父控件改动较小
调用方式
引入 
  import ServerLogDlg from '@/components/AIT/ServerLog';
  components: { ServerLogDlg },
模板
  <ServerLogDlg ref="ServerLogDlg"></ServerLogDlg>
方法
  handleLogFile() {
    // 通过调用子控件方法,弹出窗口,并传递参数
    this.$refs.ServerLogDlg.openDlg('common');
  },
-->
<template>
  <el-dialog :title="title" :visible.sync="isShow" width="80%" append-to-body>
    <el-form
      ref="form"
      v-loading="loading"
      :model="form"
      label-width="80px"
      @submit.native.prevent
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="日志类型" prop="logType">
            <el-select v-model="form.logType" placeholder="请选择">
              <el-option
                v-for="item in logTypeOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="显示行数" prop="logLineNum">
            <el-select v-model="form.logLineNum" placeholder="请选择">
              <el-option
                v-for="item in logLineNumOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文件地址" prop="logPath">
            {{ form.logPath }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <pre>
            <code style="height: 430px;" class="hljs" v-html="highlightedCode(form.logText)" />
          </pre>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="handleLoadLogFile"
        icon="el-icon-download"
        type="success"
        >读 取</el-button
      >
      <el-button @click="handleCopy" icon="el-icon-copy-document" type="success"
        >拷 贝</el-button
      >
      <el-button
        @click="closeDlg"
        icon="el-icon-circle-close"
        type="info"
        >关 闭</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import copy from "copy-to-clipboard";
import { loadLogFile } from "@/api/aitcommon/aitconfig";

export default {
  name: "ServerLogDlg",
  data() {
    return {
      isShow: false,
      loading: false,
      title: "日志文件查看",
      // 日志form
      logTypeOptions: ["common", "error", "http", "sql"],
      logLineNumOptions: [500, 1000, 3000],
      form: {
        logType: "common",
        logLineNum: 500,
        logText: "内容为空",
        logPath: "",
      },
    };
  },
  watch: {},
  methods: {
    // 高亮代码
    highlightedCode(text) {
      let text1 = text || "";
      text1 = text1.replaceAll(
        /(.* (DEBUG|debug) .*)/g,
        '<span class="log-debug">$1</span>'
      );
      text1 = text1.replaceAll(
        /(.* (INFO|info)  .*)/g,
        '<span class="log-info">$1</span>'
      );
      text1 = text1.replaceAll(
        /(.* (ERROR|error) .*)/g,
        '<span class="log-error">$1</span>'
      );
      // console.info('text1',text1);
      return text1;
    },

    // 通过函数打开对话框,子控件参数也通过函数传入
    // 相比通过属性传入参数,这种做法代码简单
    // 打开对话框
    openDlg(logType) {
      if(logType) this.form.logType=logType;
      this.isShow = true;
      this.handleLoadLogFile();
    },

    // 关闭对话框
    closeDlg() {
      this.isShow = false;
      // this.reset();
    },

    // 加载日志文件
    handleLoadLogFile() {
      // console.info('isshow',this.isShow);
      if (!this.isShow) return;
      this.loading = true;
      loadLogFile(this.form.logType, this.form.logLineNum)
        .then((res) => {
          // console.info('handleLoadLogFile',res.data.path)
          this.form.logPath = res.data.path;
          this.form.logText = res.data.text;
        })
        .finally((res) => {
          this.loading = false;
        });
    },

    // 拷贝至粘贴板
    handleCopy() {
      if (this.form.logText) {
        copy(this.form.logText);
        this.$message("内容已拷贝至粘贴板!");
      }
    },
  },
};
</script>

<style></style>
